// src/screens/LikesScreen.js
import React, { useState, useEffect } from 'react';
import { View, Text, StyleSheet, FlatList, TouchableOpacity, Image, ActivityIndicator } from 'react-native';
import api from '../services/api';

const LikesScreen = ({ navigation }) => {
  const [likes, setLikes] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetchLikes();
  }, []);

  const fetchLikes = async () => {
    try {
      setLoading(true);
      // 这里应该调用获取点赞列表的API
      // 暂时使用模拟数据
      const response = await api.getLikes(); // 假设这个API存在
      if (response.success) {
        setLikes(response.data || []);
      } else {
        setLikes([]);
      }
    } catch (error) {
      console.error('获取点赞列表失败:', error);
      setLikes([]);
    } finally {
      setLoading(false);
    }
  };

  const renderLike = ({ item }) => (
    <TouchableOpacity 
      style={styles.likeItem}
      onPress={() => {
        // 可以导航到用户详情页
        // navigation.navigate('UserProfile', { userId: item.id });
      }}
    >
      {item.avatar ? (
        <Image source={{ uri: item.avatar }} style={styles.avatar} />
      ) : (
        <View style={styles.placeholderAvatar}>
          <Text style={styles.avatarText}>{item.name?.charAt(0) || 'U'}</Text>
        </View>
      )}
      <Text style={styles.userName}>{item.name}</Text>
    </TouchableOpacity>
  );

  return (
    <View style={styles.container}>
      <View style={styles.header}>
        <Text style={styles.headerTitle}>谁赞了我</Text>
      </View>
      
      {loading ? (
        <View style={styles.loadingContainer}>
          <ActivityIndicator size="large" color="#0000ff" />
          <Text style={styles.loadingText}>加载中...</Text>
        </View>
      ) : likes.length === 0 ? (
        <View style={styles.emptyContainer}>
          <Text style={styles.emptyText}>暂时还没有人点赞</Text>
        </View>
      ) : (
        <FlatList
          data={likes}
          renderItem={renderLike}
          keyExtractor={(item) => item.id.toString()}
          style={styles.list}
        />
      )}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f5f5f5'
  },
  header: {
    backgroundColor: '#2196F3',
    padding: 15,
    alignItems: 'center'
  },
  headerTitle: {
    color: 'white',
    fontSize: 18,
    fontWeight: 'bold'
  },
  loadingContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  },
  loadingText: {
    marginTop: 10,
    fontSize: 16
  },
  emptyContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  },
  emptyText: {
    fontSize: 16,
    color: '#666'
  },
  list: {
    flex: 1
  },
  likeItem: {
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: 'white',
    padding: 15,
    borderBottomWidth: 1,
    borderBottomColor: '#eee'
  },
  avatar: {
    width: 50,
    height: 50,
    borderRadius: 25,
    marginRight: 15
  },
  placeholderAvatar: {
    width: 50,
    height: 50,
    borderRadius: 25,
    backgroundColor: '#ddd',
    marginRight: 15,
    justifyContent: 'center',
    alignItems: 'center'
  },
  avatarText: {
    fontSize: 20,
    fontWeight: 'bold',
    color: '#888'
  },
  userName: {
    fontSize: 16,
    color: '#333'
  }
});

export default LikesScreen;